<template>
	<view class="configFontsize">
    <div class="topImg">
      <u-swiper
        :list="list1"
        @change="change"
        @click="click"
      ></u-swiper>
    </div>
    <div class="price">
      <view class="priceBox">
        <div class="shape">
          售价<br>
          ￥9999.99
        </div>
      </view>
      <div class="verLine"></div>
      <view class="priceBox">
        <div class="shape">
          售价<br>
          ￥9999.99
        </div>
      </view>
    </div>
    <div class="goodsTitle">{{ goodsTitle }}</div>
    <div class="lineEvery"></div>
    <div class="wordDetail">
      <div class="goodsMes">商品信息</div>
      <div class="msgList">
        <div class="beforBox">编号：</div>
        <div class="afterBox">DB1231412</div>
      </div>
      <div class="msgList">
        <div class="beforBox">颜色：</div>
        <div class="afterBox">蓝色</div>
      </div>
      <div class="msgList">
        <div class="beforBox">尺寸：</div>
        <div class="afterBox">54*60</div>
      </div>
      <div class="msgList">
        <div class="beforBox">材质：</div>
        <div class="afterBox">牛皮</div>
      </div>
    </div>
    <div class="lineEvery"></div>
    <div class="wordDetail">
      <div class="goodsMes">详情介绍</div>
      <div class="bigImg">
        <image src="https://img.alicdn.com/imgextra/i2/2212334859296/O1CN01L7VLtM2IXcod399Id_!!2212334859296-0-scmitem176000.jpg" alt="" />
      </div>
      <div class="bigImg">
        <image src="https://img.alicdn.com/imgextra/i4/2212334859296/O1CN01bwPtrw2IXcob3OLQ7_!!2212334859296-0-scmitem176000.jpg" alt="" />
      </div>
    </div>
	</view>
</template>

<script>
import Tabs from '@/compents/tabs';
export default {
  components: {
    Tabs
  },
	data() {
    return {
      goodsTitle: '',
      list1: [
              'https://cdn.uviewui.com/uview/swiper/swiper1.png',
              'https://cdn.uviewui.com/uview/swiper/swiper2.png',
              'https://cdn.uviewui.com/uview/swiper/swiper3.png',
              ]
    }
	},
  onShow(){
    
  },
  // 接受参数
  onLoad (option) {
    this.goodsTitle = '森马集团GLM加绒圆领卫衣男女款秋冬保暖重磅上衣美式潮牌打底衫'
    // this.goodsTitle = option.title
  },
  methods: {
    change(){},
    click(){},
  },
};
</script>


<style scoped lang="scss">
  @import "@/common/configStyle.scss";

  .configFontsize {
    font-size: $ruyi-config-fontsize;
    background-color: #fff;
  }
  .topImg {
    width: 100%;
    height: auto;
  }
  .price {
    width: 100%;
    height: auto;
    display: flex;
    padding: 20rpx 0;
    .priceBox {
      width: 49.5%;
      text-align: center;
    }
  }
  .goodsTitle {
    margin-top: $ruyi-config-marginTop;
    width: $ruyi-config-outSideWidth;
    padding: 0 $ruyi-config-outSidePadding;
  }
  .wordDetail {
    margin-top: $ruyi-config-marginTop;
    width: $ruyi-config-outSideWidth;
    padding: 0 $ruyi-config-outSidePadding;
    .goodsMes {
      font-weight: $ruyi-config-fontWight;
      font-size: $ruyi-config-fontBigsize;
      margin-bottom: 10rpx;
    }
    .msgList {
      width: 100%;
      display: flex;
      margin-top: 20rpx;
      .beforBox {
        color: $ruyi-config-wordColor;
      }
      .afterBox {
        margin-left: 30rpx;
      }
    }
    .bigImg {
      margin: 20rpx 0;
      width: 100%;
      height: 800rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
</style>
